<script setup lang="ts">
import { defineProps, nextTick, ref } from 'vue'
import { rssAnalysisType } from '@/api/rss.ts'

const props = defineProps({
  rssData: {
    type: Object as () => rssAnalysisType,
    required: true,
  },
})
const message = ref('')
const includeText = ref(null)
const excludeText = ref(null)
const showincludeText = ref(false)
const showexcludeText = ref(false)

function handlerIncludeEnter() {
  if (
    includeText.value != null &&
    props.rssData !== null &&
    props.rssData !== undefined
  ) {
    props.rssData.includePatterns.push(includeText.value.value)
    message.value = ''
  }
  emit('filter')
  showincludeText.value = false
}

function handlerExcludeEnter() {
  if (
    excludeText.value != null &&
    props.rssData !== null &&
    props.rssData !== undefined
  ) {
    props.rssData.excludePatterns.push(excludeText.value.value)
    message.value = ''
  }
  emit('filter')
  showexcludeText.value = false
}

const emit = defineEmits(['filter'])

function handlerLostFocus() {
  showincludeText.value = false
  showexcludeText.value = false
  message.value = ''
}

function handlerCloseChip(item: string, isInclude: boolean) {
  if (isInclude) {
    props.rssData.includePatterns = props.rssData.includePatterns.filter(
      (pattern) => pattern !== item,
    )
  } else {
    props.rssData.excludePatterns = props.rssData.excludePatterns.filter(
      (pattern) => pattern !== item,
    )
  }
  emit('filter')
}

function showIncludeText() {
  showincludeText.value = true
  console.log(includeText.value)
  nextTick(() => {
    if (includeText.value !== null) includeText.value.focus()
  })
}

function showExcludeText() {
  showexcludeText.value = true
  console.log(excludeText.value)
  nextTick(() => {
    if (excludeText.value !== null) excludeText.value.focus()
  })
}
</script>

<template>
  <div style="margin-bottom: 20px; color: gray">
    <v-col style="margin: 0; padding: 0">
      <text>排除</text>
      <v-btn
        elevation="1"
        size="30"
        icon="mdi-plus"
        @click="showExcludeText"
        style="margin-left: 20px; margin-top: -5px"
      ></v-btn>
      <v-text-field
        hide-details
        variant="outlined"
        v-model="message"
        ref="excludeText"
        @keyup.enter="handlerExcludeEnter"
        v-show="showexcludeText"
        @focusout="handlerLostFocus"
        style="margin-top: 10px; width: 200px"
      ></v-text-field>
    </v-col>

    <v-col>
      <v-chip
        v-for="(item, index) in props.rssData.excludePatterns"
        :key="index"
        variant="outlined"
        @click:close="handlerCloseChip(item, false)"
        style="margin-left: 5px; margin-right: 5px"
        closable
      >
        <text style="font-size: 15px">{{ item }}</text>
      </v-chip>
    </v-col>
  </div>
  <div style="margin-bottom: 20px; color: gray">
    <v-col style="margin: 0; padding: 0">
      <text>导入</text>
      <v-btn
        elevation="1"
        size="30"
        icon="mdi-plus"
        @click="showIncludeText"
        style="margin-left: 20px; margin-top: -5px"
      ></v-btn>
      <v-text-field
        hide-details
        variant="outlined"
        ref="includeText"
        v-model="message"
        @keyup.enter="handlerIncludeEnter"
        v-show="showincludeText"
        @focusout="handlerLostFocus"
        style="margin-top: 10px; width: 200px"
      ></v-text-field>
    </v-col>

    <v-col>
      <v-chip
        v-for="(item, index) in rssData.includePatterns"
        :key="index"
        variant="outlined"
        @click:close="handlerCloseChip(item, true)"
        style="margin-left: 5px; margin-right: 5px"
        closable
      >
        <text style="font-size: 15px">{{ item }}</text>
      </v-chip>
    </v-col>
  </div>
</template>

<style scoped></style>
